<template>
  <div class="app">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="img" />
      <p class="strong">{{ carList.brand_name }}</p>
      <p>品牌介绍</p>
    </div>
    <div class="showCar">
      <van-grid :column-num="3">
        <van-grid-item
          @click="goDetail(item)"
          v-for="item in hotCar"
          :key="item.info.series_id"
        >
          <van-image :src="item.info.image_url" />
          <p>{{ item.info.series_name }}</p>
          <p class="price"><span>询底价</span></p>
        </van-grid-item>
      </van-grid>
    </div>
    <van-tabs class="content_out">
      <van-tab
        v-for="(item, index1) in carList.online_list"
        :title="item.category_name"
        :key="index1"
        class="__content"
      >
        <div class="wrapper">
          <div
            class="content_in"
            v-for="(items, index2) in item.series_list"
            :key="index2"
          >
            <p class="head" v-if="items.flag">
              {{ items.sub_brand_name }}
            </p>
            <div class="content" v-else @click="goDetail(items)">
              <div class="left">
                <img :src="items.info.image_url" alt="" />
              </div>
              <div class="right">
                <p class="name">{{ items.info.series_name }}</p>
                <p class="score">类型:{{ items.info.outter_name || '未知'}} - {{ `年份：${items.info.year || null}` }}</p>
                <p class="price">指导价:{{ items.info.official_price }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { get } from "@/tool/get";
import { Toast } from 'vant';
export default {
  name:"carsPage",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const goDetail = (item) => {
      router.push({ path: `/carDetail/${item.info.series_id}` });
    };
    onMounted(async () => {
      get("/data/selectDetail", {
        params: route.params.id,
      }).then((res) => {
        state.carList = res.data.data;
        state.hotCar =
        state.carList.online_list[0].series_list.slice(1, 4) || [];
      });
      if(state.carList){
        Toast.clear();
      }else{
        Toast.fail('数据加载失败');
      }
    });
    const goBack = () => {
      router.back(-1);
    };
    const state = reactive({
      carList: [],
      hotCar: [],
      height: 0,
    });
    return {
      ...toRefs(state),
      goDetail,
      goBack,
    };
  },
};
</script>

<style  lang="less" scoped>
body{
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
}
.app {
  width: 100%;
  height: 100vh;
  .header {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .img {
      width: 15px;
      height: auto;
    }
    .strong {
      font-size: 16px;
      font-weight: 500;
    }
    p {
      font-size: 12px;
      color: #aaa;
    }
  }
  .showCar {
    width: 100%;
    .van-grid {
      padding: 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      .van-grid-item {
        width: 100%;
        van-image {
          width: 100%;
          height: 100px;
        }
        p {
          font-size: 14px;
        }
        .price {
          font-size: 12px;
          background: yellowgreen;
          line-height: 20px;
          margin: 5px;
          span {
            margin: 0 5px;
            font-size: 12px;
            line-height: 12px;
          }
        }
      }
    }
  }
  .content_out {
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    .wrapper {
      height: calc(100vh - 250px);
      width: 100%;
      overflow-y: scroll;
      .head {
        margin: 5px auto;
        text-align: left;
        font-size: 16px;
        line-height: 22px;
      }
      .content {
        // background-image:linear-gradient(#fef,#fff,#eef);
        display: flex;
        width: 100%;
        padding:5px 10px;
        margin: 10px auto;
        width: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        background: rgba(250,250,250, .5);
        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%);
        .left {
          flex: 0 0 120px;
          p {
            font-size: 12px;
          }
          img {
            width: 80%;
          }
        }
        .right {
          flex: 1;
          text-align: left;
          .name {
            font-size: 18px;
            line-height: 22px;
          }
          .score {
            font-size: 16px;
            line-height: 26px;
          }
          .price {
            font-size: 14px;
            line-height: 18px;
          }
        }
      }
    }
  }
}
</style>